<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div id="app">
  <h1>{{ str }}</h1>
  <ul>
    <todo-item1
      v-for="(item, index) of todos"
      v-bind:todo="item.text"
      v-bind:key="index"
    />
  </ul>
<!--  <p>{{tit}}</p>-->
</div>
<script src="vue.js"></script>
<script>
  // console.log(Vue)
  // Vue.component(组件名, 配置项) xxx.vue
  Vue.component('todo-item1', {
    template: `<li id="item">{{todo}}<span></span></li>`,
    data() {
      return {
        tit: 'todo-item'
      }
    },
    props: ['todo'],
    methods: {},
    beforeCreate() {
      console.log(document.getElementById('item'))
    },
    mounted() {
      console.log(document.getElementById('item'))
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      count: 123,
      str: 'Hello Vue',
      isShow: true,
      list: [],
      person: {},
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  })

</script>


</body>
</html>